<template>
  <div class="meeting-user" v-loading="loading">
    
    <el-form :inline="true"  class="demo-form-inline">
        <el-form-item >
            <el-input v-model="filterText" placeholder="请输入相应信息查询"  v-on:keyup.enter="onSearch"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
    </el-form>

    <br>

    <el-row :gutter="40">
        <el-col :span="12">
            <div class="meeting-user-content">
                <el-tree
                class="filter-tree"
                :data="trees"
                :props="defaultProps"
                node-key="id"
                show-checkbox
                accordion
                @check="checkChange"
                :filter-node-method="filterNode"
                ref="tree">
                </el-tree>
            </div>
        </el-col>

        <el-col :span="12">
            <div class="meeting-user-content">
                  <div class="portal-modules-group">
                        <div
                        class="group-module"
                        v-for="user in selectUsers"
                        :key="user.id"
                        @click="delUser(user)"
                        >
                            <div class="group-module-remove" ></div>
                            {{ user.label }}
                        </div>
                  </div>
            </div>
        </el-col>

    </el-row>



  </div>
</template>
<script>
import axios from 'axios';
import { createConfig } from '@/assets/js/tools';
import {
  mapGetters
} from 'vuex'
//import Quill from 'quill'  //引入编辑器
export default {
  name: 'meetingUser',
  data() {
    return {
        filterText:'',
        loading: false,
        trees:[],
        defaultProps: {
            children: 'children',
            label: 'label'
        },
        users:[],
        checkedNodes:[]
    };
  },
  props: ['meeting','cls','sourceType'],
  components: {

  },
  computed: {
      ...mapGetters({
        userInfo:'getUserInfo'
      }),
      selectUsers:function(){
          if(Array.isArray(this.checkedNodes) && this.checkedNodes.length>0){
                let array=[]
                let keys=[]
               this.checkedNodes.forEach((node)=>{
                    if(node.type==='user'){
                        if(!keys.includes(node.key)){
                            array.push(node)
                            keys.push(node.key)
                        }
                    }
                })
                return array
          }else {
              return []
          }
      }
  },
  watch: {
      cls:function(val){
          if(val==='change'){
              this.setCheckedKeys()
          }
      }
  },
  methods: {
    onSearch(){
        this.$refs.tree.filter(this.filterText);
    },
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1 || data.id.indexOf(value) !== -1;
    },
    checkChange(data,nodes){
        this.checkedNodes=nodes.checkedNodes
    },
    delUser(user){
        this.$refs.tree.setChecked(user.id,false)
        this.checkedNodes=this.$refs.tree.getCheckedNodes()
    },
    addFun() {
      this.$refs['addform'].validate((valid) => {
        if (valid) {
          this.addBlock();
        } else {
          return false;
        }
      });
    },
    onSubmit() {
    //  console.log(this.addForm)
      let param={
        meetingId: this.meeting.id,
        nodes:this.selectUsers
      }
      this.loading = true;
       let path = "/station/api/meeting/saveParty?meetingId="+ this.meeting.id;
      if(this.sourceType === 'column'){
          path = "/station/api/meeting/column/saveParty?columnId="+ this.meeting.id;
          param.columnId = this.meeting.id
      }
      let config=createConfig(this.userInfo.token)
      axios
        .post(path, param, config)
        .then((data) => {
          if (data.data.status==="SUCCESS") {
            this.$message({
              showClose: true,
              message: '保存成功',
              type: 'success',
            });
            this.$emit('hascreated');
          } else {
            this.$message({
              showClose: true,
              message: data.data.errorMsg ? data.data.errorMsg : '保存失败',
              type: 'error',
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          // eslint-disable-next-line no-console
          console.log(err);
          this.$message({
            showClose: true,
            message: '保存失败',
            type: 'error',
          });
          this.loading = false;
        });
    },
    cancelFun() {
      this.$emit('cancelAdd');
    },
    setCheckedKeys(){
        let keys=[]
        let notes=[]
        if(this.meeting && this.meeting.party.length>0){
            this.meeting.party.forEach( (user)=>{
                keys.push(user.nodeId)
                notes.push({
                    id:user.nodeId,
                    key:user.username,
                    label:user.employeeName,
                    type:'user'
                })
            })
            this.checkedNodes=notes
            this.$refs.tree.setCheckedKeys(keys)
        }
    },
    loadTree(){
        this.loading = true;
        let path = "/station/api/meeting/getMeetingNodes?meetingId="+ this.meeting.id;
        if(this.sourceType === 'column'){
          path = "/station/api/meeting/column/getColumnNodes?columnId="+ this.meeting.id;
        }
        let headers = { token: this.userInfo.token };
        axios.get(path, {
            params: {},
            headers: headers,
            })
        .then((data) => {
          if (data.data.status==="SUCCESS") {
              this.trees=data.data.content
              this.setCheckedKeys()
          } else {
            this.$message.error(
              data.data.errorMsg ? data.data.errorMsg : '获取数据出错'
            );
          }
          this.loading = false;
        })
        .catch((err) => {
          // eslint-disable-next-line no-console
          console.log(err);
          this.$message.error('获取数据出错');
          this.loading = false;
        });
    }
  },
  mounted() {
      this.loadTree()
  },
};
</script>
<style scoped lang="scss">
.meeting-user {
  position: relative;
  height: 100%;
  width: 100%;
  &-content{
     position: relative;
     height: 430px; 
     overflow: auto;
     border: 1px solid #DCDFE6;
     padding: 20px;
       &::-webkit-scrollbar {
            width: 2px;
            height: 2px;
            background-color: #ffffff;
        }
        ::-webkit-scrollbar-thumb { 
            border-radius: 3px; 
            height: 50px;    /* 滚动条滑块长度 */
            background-color: #ccc; 
        }

  }
}
  .portal-modules-group {
    padding: 10px 0px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;

    .group-module {
      position: relative;
      font-size: 0.875rem;
      margin: 7px 10px;
      padding: 5px 15px;
      background-color: #f1f2f4;
      border-radius: 1px;
 
      &-remove {
        position: absolute;
        right: -4px;
        top: -4px;
        width: 13px;
        height: 13px;
        background: url("~@/assets/img/close.png") center center no-repeat;
        background-size: 100%;
      }
      span {
        font-size: 1rem;
        font-weight: 600;
        padding: 0px 2px;
        background: #fff;
      }
    }
  }
</style>
